<template>
	<view class="detail-video">
		<!-- #ifndef APP-PLUS -->
		<video class="videoPoster" :src="graphic.videoUrl"
		 controls></video>
		<!-- #endif -->
		<scroll-view scroll-y="true"
		class="scroll-view-block"
		 :style="{'height': scrollHeight + 'px','padding-top': scrollViewTop + 'px','box-sizing': 'border-box'}">
			<view class="scroll-top-line flex-center-around">
				<block v-for="(item) in  tabBars" :key="item.id">
					<view class="scroll-top-item" 
					:class="item.id == tabId ? 'top-btn-select':''"
					@click="changeTab(item.id)">{{item.name}}</view>
				</block>
			</view>
			
			<!-- 站位符-->
			<view class="placeholder-wrap"></view>
			<!-- 简介 -->
			<view v-if="tabId == 0" 
			class="detail-content-wrap animated fadeIn fast">
				<avatar class="avatar-block"
				:nickname="graphic.nickName"
				:avatarUrl="graphic.avatarUrl"
				:isAttention="graphic.isAttention">
					<view slot="nickNameBelow" class="fans-unm">
						369粉丝
					</view>
				</avatar>
				<view class="detail-content">
					<view class="paly-time-comments flex-ali-center">
						<view class="paly-time-comments-item iconfont icon-bofangshu">
							<text>{{graphic.playNum}}</text>
						</view>
						<view class="paly-time-comments-item iconfont icon-pinglun">
							<text>{{graphic.commentNum}}</text>
						</view>
						<view class="paly-time-comments-item">
							<text>{{graphic.sendTime}}</text>
						</view>
					</view>
					<view class="detail-text">
						<text selectable space="nbsp">
							{{graphic.contentText}}
						</text>
					</view>
				</view>
			</view>
			<!-- 评论 -->
			<view v-else 
			class="comments-content animated fadeIn fast">
				<view class="comment-block" v-if="isReady">
					<block v-for="(item, index) in commentList" :key="index">
						<comments :comments="item" 
						@clickReplayComment="clickReplayComment" 
						:commentsIndex="index"
						@clickComment="clickReplayComment"
						@clickAttention="clickAttention"></comments>
					</block>
				</view>
				
			</view>
			
		</scroll-view>
		<!-- 评论输入框-->
		<fun-comment-input v-if="showInput" @inputBlur="inputBlur" @clickSend="clickSend"
		@inputOnFocus="inputOnFocus"
		@linechange="linechange"></fun-comment-input>
		<view class="addComment iconfont icon-tianjia" v-if="showAddcomment" @click="clickInput"></view>
	</view>
</template>

<script>
	import avatar from '@/components/avatar/avatar.vue';
	import comments from '@/components/comments/comments.vue';
	import chatInput from '@/components/chatInput/chatInput.vue';
	import {TheFun} from '@/model/theFun.js';
	import {Comment} from '@/model/comment.js';
	import funCommentInput from '@/components/chatInput/funCommentInput.vue';
	export default {
		data() {
			return {
				scrollHeight: 500,
				tabId:0,
				tabBars:[{
					name:'简介',
					id:0
				},{
					name:'评论',
					id:1
				}],
				graphic:{},
				commentList:[],
				isReady:true,
				showInput:false,
				showAddcomment:false,
				commentContent:'',
				commentsIndex:0,
				comment:{
					commentLevel: 1,
					parentId: 0,
					funId: 0,
					toUid: '',
					toNickname: '',
					commentContent: '',
				},
				scrollViewBottom:0,
				scrollViewTop:0
			};
		},
		components:{
			avatar,
			comments,
			chatInput,
			funCommentInput
		},
		onLoad() {
			// 获取可视区域高度减去
			let res = uni.getSystemInfoSync();
			this.scrollHeight = res.windowHeight - 226
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('acceptDataFromOpenerPage', async (data)=> {
				this.graphic = data.graphic
				let res = await TheFun.addPlayNum({id:this.graphic.id})
			})
		},
		onUnload() {
			
		},
		methods:{
			// 切换选项卡
			changeTab(id){
				this.tabId = id;
				this.showAddcomment = false
				if(this.tabId == 1){
					this.getComments(this.graphic.id)
					this.showAddcomment = true
				}
			},
			async getComments(id){
				let res = await Comment.getCommentList({funId:id})
				if(res.code != 200){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				this.commentList = res .data
				console.log(this.commentList)
			},
			async addcomment(param){
				uni.showLoading({
					mask:true,
					title:"加载中..."
				})
				let res = await Comment.addComment(param)
				uni.hideLoading()
				if(res.code != 200){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				uni.showToast({
					icon:'none',
				    title: "评论成功",
				    duration: 2000
				});
				if(param.commentLevel == 1){
					this.commentList.unshift(res.data)
					return
				}
				this.commentList[this.commentsIndex].childList.unshift(res.data)
			},
			clickInput(e){
				// console.log(e)
				this.comment.commentLevel = 1
				this.comment.parentId = 0
				this.comment.toUid = ''
				this.comment.toNickname = ''
				this.comment.commentContent = ''
				this.comment.funId = this.graphic.id
				this.showInput = true
				this.showAddcomment = false
			},
			inputOnFocus(e){
				this.scrollViewTop = e.detail.height
				// this.scrollViewBottom = uni.upx2px(100)
			},
			linechange(e){
				if(e.height > 120)
					return
				this.scrollViewBottom = this.oldBottom + e.height
			},
			inputBlur(){
				this.scrollViewTop = 0
				this.scrollViewBottom = 0
				setTimeout(e=>{
					this.showInput = false
					this.showAddcomment = true
				}, 100)
			},
			clickSend(e){
				this.comment.commentContent = e
				this.addcomment(this.comment)
			},
			clickReplayComment(e){
				this.commentsIndex = e.commentsIndex
				if(e.reComments.commentLevel == 1){
					this.comment.commentLevel = 2
					this.comment.parentId = e.reComments.id
					this.comment.toUid = e.reComments.uid
					this.comment.toNickname = e.reComments.nickName
					this.comment.funId = e.reComments.shareId ? e.reComments.shareId : e.reComments.funId
				}else{
					this.comment.commentLevel = 3
					this.comment.parentId = e.reComments.parentId
					this.comment.toUid = e.reComments.uid
					this.comment.toNickname = e.reComments.nickName
					this.comment.funId = e.reComments.funId
				}
				this.showInput = true
				this.showAddcomment = false
			},
			clickAttention(uid){
				console.log(uid)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail-video{
		line-height: 1;
		scroll-view{
			padding-bottom: 170rpx;
			box-sizing: border-box;
		}
		.videoPoster{
			height: 225px;
			width: 100%;
			background-color: #000;
		}
		.scroll-top-line{
			height: 80rpx;
			position: fixed;
			right: 0;
			left: 0;
			z-index: 100;
			background-color: #fff;
			border-bottom: #f2f2f2 1rpx solid;
			.scroll-top-item.top-btn-select{
				color: $fun-theme-color;
				border-bottom: 8rpx $fun-theme-color solid;
			}
			.scroll-top-item{
				font-size: 30rpx;
				text-align: center;
				padding: 20rpx;
				margin-bottom: 2rpx;
				box-sizing: border-box;
				color: $fun-text-6-color;
			}
		}
		.placeholder-wrap{
			height: 80rpx;
		}
		.detail-content-wrap{
			padding: 10rpx;
			.avatar-block{
				.fans-unm{
					margin-top: 4rpx;
					color: $fun-text-9-color;
					font-size: 22rpx;
				}
			}
			.detail-content{
				margin: 20rpx 0rpx;
				color: #333333;
				line-height: 1.3;
				.paly-time-comments{
					border-bottom: #f2f2f2 1rpx solid;
					.paly-time-comments-item {
						color: #888;
						margin: 10rpx 20rpx;
						font-size: 28rpx;
						text{
							padding: 0 10rpx;
						}
					}
				}
				.detail-text{
					margin-top: 20rpx;
					font-size: 30rpx;
				}
			}
		}
		.comments-content{
			padding: 0 10rpx;
		}
		.addComment{
			width: 80rpx;
			height:80rpx;
			background-color: $fun-theme-color;
			color: #FFF;
			position: fixed;
			bottom: 30rpx;
			right: 30rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 80rpx;
			font-size: 35rpx;
		}
	}

</style>
